<template>
  <div class="header">
      <div class="header-top">
          <div class="user_header">
              <img src="./guarantee_2@3x.png" alt="头像">
          </div>
          <div class="header_content"> 
            <div class="tit"><span></span>{{seller.name}}</div>
            <div class="service">{{seller.description}}/{{seller.deliveryTime}}分钟送达</div>
            <div class="supports" v-if="seller.supports"><span></span>{{seller.supports[0].description}}</div>         
          </div>
          <div v-if="seller.supports" class="support_count" @click="showDetail">
                <span class="count">{{seller.supports.length}}个 </span>
                 <i class="icon-keyboard_arrow_right"> > </i> 
          </div>       
      </div>
      <div class="header_notice">
          <span></span>
          <p class="notice_text">{{seller.bulletin}}</p>
          <span> > </span>
      </div>
      <div class="background">
          <img src="./banner_1.jpg" alt="..">
      </div>
      
      <transition name="fade">
            <div class="detail" v-show="detailShow">
          <div class="detail_wrapper clearfix">
              <div class="detail_main">
                  <div class="detail_tit">{{seller.name}}</div>
                  <div class="star"></div>
                  <div class="tit">
                      <div class="line"></div>
                      <div class="tit_text">优惠信息</div>
                      <div class="line"></div>
                  </div>
                  <ul v-if="seller.supports" class="supports">
                      <li class="support-item" v-for="item in seller.supports">
                           <span class="icon" :class="classMap[item.type]"></span>
                            <span class="support-text">{{item.description}}</span>
                      </li>
                  </ul>
                  <div class="tit">
                      <div class="line"></div>
                      <div class="tit_text">商家公告</div>
                      <div class="line"></div>
                  </div>
                  <div class="bulletin">{{seller.bulletin}}</div>  
              </div>
          </div>
          <div class="detail_close" @click="hideDetail">
              <img src="./close.png" alt="close">
          </div>
      </div>
      </transition>    
  </div>
</template>

<script  type="text/ecmascript-6">
// import star from '@/components/star/star.vue';

export default {
     props: {
        seller: {
            type: Object
        }
    },
    data(){
        return {
            detailShow: false
        }
    },
    created(){
        this.classMap = ['decrease','discount','special','invoice','guarantee'];
    },
    methods:{
        showDetail() {
            this.detailShow = true
        },
        hideDetail(){
            this.detailShow = false
        }
    },
    components: {
        // star
    }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
    // @import "../common/css/icon.css";
    
.header {
    background: rgba(7, 17, 27, 0.5);
    position: relative;
    .header-top {
        padding: 24px 0 18px 24px;
        height: 64px;
        position: relative;
        color: rgb(255,255,255);
        .user_header {
            float: left;
            margin-right: 16px;
            img {
                width: 64px;
                height: 64px;
                border-radius: 2px;
                display: block;
            }
        }
        .header_content {
            float: left;
            padding-top: 2px;
            color: rgb(255,255,255);
            .tit {
                font-size: 16px;
                font-weight: bold;
                line-height: 18px;
                vertical-align: middle;
                span {
                   display: inline-block;
                   width: 30px;
                   height: 18px;
                   background: url(./brand@2x.png) no-repeat 0 0;
                   background-size: 30px 18px; 
                   vertical-align: middle;
                   margin-right: 6px;
                   border-radius: 2px;
                }
            }
            .service {
                margin: 8px 0 10px;
                font-size: 12px;
                font-weight: 400;
                line-height: 12px;
            }
            .supports {
                font-size: 10px;
                font-weight: 400;
                line-height: 12px;
                vertical-align: top;
                span {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background: url(./decrease_1@2x.png) no-repeat 0 0;
                    background-size: 12px 12px; 
                    margin-right: 4px;
                    vertical-align: top;
                }
            }
        }
        .support_count {
            position: absolute;
            right: 12px;
            bottom: 12px;
            padding: 7px 8px;
            border-radius: 10px;
            font-size: 10px;
            line-height: 12px;
            background-color: rgba(0,0,0,.2);
            span {
                margin-right: 2px;
            }
            // .icon-keyboard_arrow_right {
            //     font-size: 10px;
            // }
        }
    }
    .header_notice {
        height: 28px;
        position: relative;
        padding: 0 30px 0 36px;
        color: rgb(255,255,255);
        background: rgba(7, 17, 27, 0.2);
        .notice_text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 10px;
            line-height: 28px;
        }
        span {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            &:first-of-type {
                width: 22px;
                height: 12px;
                background: url(./bulletin@2x.png) no-repeat 0 0;
                background-size: 22px 12px;
                left: 8px;
                border-radius: 2px;
            }
            &:last-of-type {
                font-size: 20px;
                right: 10px;
                // width: 30px;
            }
        }
    }
    .background {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: -1;
        filter: blur(10px);
        img{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
    }
    .detail {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(7,17,27,.8);
        z-index: 99;
        color: rgb(255,255,255);
        transition: all .5s;
        backdrop-filter: blur(10px);
        &.fade-transition {
            opacity: 1;
            // background-color: rgba(7,17,27,.8);
        }
        &.fade-enter,&.fade-leave {
            opacity: 0;
            // background-color: rgba(7,17,27,0);
        }
        .detail_wrapper {
            width: 100%;
            min-height: 100%;
            .detail_main {
                margin-top: 64px;
                padding-bottom: 64px; 
                .detail_tit {
                    text-align: center;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 16px;
                }
                .star {
                    height: 68px;
                }
                .tit {
                    display: flex;
                    width: 80%;
                    margin: 28px auto 24px auto;
                    .line {
                        flex: 1;
                        position: relative;
                        top: -6px;
                        border-bottom: 1px solid rgba(255,255,255,.2)
                    }
                    .tit_text {
                        padding: 0 12px;
                        font-size: 14px;
                        font-weight: 700;
                    }
                }
                .supports {
                    width: 80%;
                    margin: 24px auto 28px;
                    .support-item{
                        margin-bottom: 12px;
                        &:last-of-type {
                            margin-bottom: 0;
                        }
                        .icon {
                            display: inline-block;
                            width: 16px;
                            height: 16px;
                            border-radius: 2px;
                            // background-color: #fff;
                            margin: 0 6px 0 12px;
                            vertical-align: middle;
                            background-repeat: no-repeat;
                            background-position: 0 0;
                            background-size: 16px 16px;
                            &.decrease {
                                background-image: url(./decrease_2@2x.png);
                            }
                            &.discount {
                                background-image: url(./discount_2@2x.png);
                            }
                            &.special {
                                background-image: url(./special_2@2x.png);
                            }
                            &.invoice {
                                background-image: url(./invoice_2@2x.png);
                            }
                            &.guarantee {
                                background-image: url(./guarantee_2@2x.png);
                            }
                        } 
                        .support-text {
                            font-size: 12px;
                            font-weight: 200;
                            line-height: 12px;
                            vertical-align: middle;
                        }
                    }
                   
                }
                .bulletin {
                    width: 80%;
                    margin: 24px auto;
                    font-size: 12px;
                    font-weight: 200;
                    line-height: 24px;
                }
            }
        }
        .detail_close {
            position: relative;
            width: 20px;
            height: 20px;
            margin: -64px auto 0 auto;
            img {
                width: 100%;
            }
        }
    }
}
</style>
